<template>
    <div class="four-code displayFlex flexCenter positionR">
        <span class="placeholder-text" v-if="!(codeValue)">请输入手机短信验证码</span>
        <label class="code-item-wrap displayFlex justifyCtBwt" for="codeInput">
            <span class="code-item">{{codeValue.toString().slice(0,1)}} <span class="light-line" :class="{'no-number':codeValue.toString().length ==  0}" v-if="(codeValue.toString().length ==  0 ) && hasLightLine"></span> </span>
            <span class="code-item">{{codeValue.toString().slice(1,2)}} <span class="light-line" :class="{'no-number':codeValue.toString().length ==  1}" v-if="codeValue.toString().length == 1 && hasLightLine"></span> </span>
            <span class="code-item">{{codeValue.toString().slice(2,3)}} <span class="light-line" :class="{'no-number':codeValue.toString().length ==  2}" v-if="codeValue.toString().length == 2 && hasLightLine"></span> </span>
            <span class="code-item">{{codeValue.toString().slice(3,4)}} <span class="light-line" :class="{'no-number':codeValue.toString().length ==  3}" v-if="(codeValue.toString().length == 3 || codeValue.toString().length == 4)&& hasLightLine"></span> </span>
        </label>
        <input class="code-input" ref="codeInput" @focus="inputFocus" id="codeInput" type="number" maxlength="4" v-model="codeValue" size = '4' @blur="inputBlur">
    </div>
</template>

<script>
    export default {
        name: "fourCode",
        data(){
            return{
                codeValue:'',
                codeObj:{codeTrue:false,code:null},
                hasLightLine:false,
            }
        },
        methods:{
            returnCode(){
                let that = this;
                this.codeObj = {
                    code:that.codeValue
                };
                if( that.codeValue.toString().length == 4 ){
                    this.codeObj.codeTrue = true;
                    this.$emit("checkCode",that.codeObj);
                }else{
                    this.codeObj.codeTrue = false;
                    this.$emit("checkCode",that.codeObj);
                }
            },
            inputBlur(){
                this.iosBlur();
                this.hasLightLine = false;
            },
            inputFocus(){
                this.hasLightLine = true
            },
        },
        watch:{
            codeValue(val){
                if(val.toString().length == 4){
                    this.$refs.codeInput.blur();
                }
                this.returnCode()

            }
        }
    }
</script>

<style scoped>
    .four-code{
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding-top: .36rem;
    }
    .code-input-item{
        background-color: transparent;
        position: relative;
        z-index: 1;
    }
    .placeholder-text{
        position: absolute;
        color: #CCCCCC;
        font-size: .15rem;
        bottom: .15rem;
        z-index: 1;
    }
    .code-item-wrap{
        width: 100%;
        height: .3rem;
        text-align: center;
    }
    .light-line{
        height: .15rem;
        width: 1px;
        background: #333;
        position: absolute;
        left: 70%;
        top: 1px;
        display: inline-block;
        /*-webkit-animation: lightLine infinite .3s;*/
        /*-o-animation: lightLine infinite .3s;*/
        animation: lightLine infinite 1.5s;
    }
    .no-number{
        left: 50%;
    }
    @keyframes lightLine {
        0%{
            opacity: 1;
        }
        25%{
            opacity: 0;
        }
        75%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    .code-input{
        width: 100%;
        height: .3rem;
        letter-spacing: .81rem;
        padding: 0 .2rem;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
    }
    .code-item{
        display: inline-block;
        width: .5rem;
        height: .3rem;
        font-size: .14rem;
        position: relative;
        z-index: 2;
        border-bottom: 1px solid #E0E0E0;
    }
    .code-input-item{
        width: 100%;
        height: 100%;
        text-align: center;
    }
</style>